<template>
  <div>
		<div class="head">
			<AppHeader style="z-index:10"></AppHeader>
			<van-image
				:src="require('@/assets/img/explore-6.jpg')"
					style="width: 100%;height: 300px;"
				/>
			<h1 >旅行条例</h1>
		</div>
    <!-- 事前准备 -->
    <div class="Preparation">
      <h1>事前准备</h1>
      <van-image
      :src="require('@/assets/img/xz1.jpg')"
        style="width: 100%; height: 200px"
      />
      <van-cell-group inset>
        <van-cell title="可可西里自然保护区前往须知" 
        title-style="fontSize:24px;color:red;" 
        label="严禁非法穿越。2017年11月，青海可可西里、新疆阿尔金山和西藏羌塘国家级自然保护区联合发布公告，禁止一切单位或个人随意进入保护区开展非法穿越活动。对因非法穿越活动造成保护区自然资源、生态环境严重破坏的单位或个人，保护区将交由公安机关处理，直至追究刑事责任；造成人身伤亡等事故，责任由开展活动的单位或个人承担。
        2020年9月4日，青海格尔木市公安局发布通告，禁止一切社会团体或个人随意从格尔木前往玉树州可可西里自然保护区开展旅游、探险、非法穿越等活动。凡是出租车、私家车由格尔木载客前往可可西里自然保护区的一律必须先行前往公安机关进行备案。" />
      </van-cell-group>
      <van-image
      :src="require('@/assets/img/xz2.jpeg')"
        style="width: 100%; height: 200px"
      />
      <van-cell-group inset>
        <van-cell title="可可西里自然保护区安全须知" 
        title-style="fontSize:24px;color:red"
        label="可可西里凭借着自己迷人的风光吸引了大批游客前去观赏，但需要注意的是，可可西里是青海海拔最高的地区之一，且当地的医疗卫生条件比较差，如果不能够适应完整的高原气候，最好要先呆在格尔木多适应几天再去。
        除此之外，可可西里当地的野生动物非常多，一些野牦牛，藏羚羊和黄羊等是非常危险的，遇到它们一定要远离，避免出事故。注意，在出发之前要充分休息，避免感冒，去到可可西里之后，可能会出现高山反应，要注意多休息，不可饮酒负重，如果难以克服，一定要第一时间寻求医疗帮助，切勿拿生命开玩笑" />
      </van-cell-group>
      <van-image
      :src="require('@/assets/img/xz3.png')"
        style="width: 100%; height: 200px"
      />
      <van-cell-group inset>
        <van-cell title="汽车安全基本提示"
        title-style="fontSize:24px;color:red"  
        label="安心惬意的旅行离不开状态良好的车辆。如果你准备自行驾驶，务必确认电池、制动、车灯和发动机可以正常工作，然后检查油量和胎压(不要忘了备胎)。另外，建议带一个车载应急包一有了备用钥匙、跨接线和汽车电池充电器，遇到问题可能只需要短暂停留，没有的话，或许就要耽搁一天。" />
      </van-cell-group>    
    </div>
    <!-- 出行方式 -->
    <div class="tripMode">
      <h1 style="margin-bottom: 20px;">出行方式</h1>
      <van-tabs v-model="active">  
        <van-tab title="跟团游" title-style="font-size:22px;" >
          <van-grid direction="horizontal" :column-num="3" style="margin-bottom: 20px;">
            <van-grid-item url="https://www.ctrip.com/">
              <van-image width="30" fit="contain" :src="require('@/assets/img/xc.webp')"/>
              <p>携程</p>
            </van-grid-item>
            <van-grid-item url="https://www.qunar.com/">
              <van-image width="30" height="30" fit="contain" :src="require('@/assets/img/qn.webp')"/>
              <p>去哪儿</p>
            </van-grid-item>
            <van-grid-item url="https://www.tuniu.com/">
              <van-image width="30" height="50" fit="contain" :src="require('@/assets/img/tn.png')"/>
              <p>途牛</p>
            </van-grid-item>
            <van-grid-item url="https://www.fliggy.com/">
              <van-image width="30" height="30" fit="contain" :src="require('@/assets/img/fz.png')"/>
              <p>飞猪</p>
            </van-grid-item>
            <van-grid-item url="https://www.mafengwo.cn/">
              <van-image width="30" height="30" fit="contain" :src="require('@/assets/img/mfw.png')"/>
              <p>马蜂窝</p>
            </van-grid-item>
            <van-grid-item url="http://www.lvmama.com/">
              <van-image width="30" height="30" fit="contain" :src="require('@/assets/img/lmm.jpg')"/>
              <p>驴妈妈</p>
            </van-grid-item> 
          </van-grid>
          <van-cell title="查看更多旅游网" title-style="font-size:16px;" is-link url="http://www.hao123.com/old_lvyou" />
        </van-tab>
        <van-tab title="自驾游" title-style="font-size:22px;">
          <van-image
          width="300"
          fit="contain"
          :src="require('@/assets/img/zjy.webp')"
        />
          <p>开上自己的爱车和亲朋好友来一趟属于你们的冒险。</p>
          <p>心疼爱车的人,也可选择租车,App及线下租车公司都很方便。</p>
        </van-tab>
      </van-tabs>
      <!-- 行车规划 -->
    </div>
    <!-- 行车规划 -->
    <div class="trafficPlanning">
      <h1>行车规划</h1>
      <van-collapse v-model="activeNames" class="planTitle">
        <van-collapse-item title="规划很重要" title-style="backgroung-color:red;" name="1">
          <h4>
          开车的时间越少，探索和观光的时间就越多。早上早起一会儿，就能避开高峰期，白天欣赏风景，晚上感受野外的风采。建议避免长时间驾驶，中途可以借助加油加气的时间，短暂休息，也可多人轮流驾驶。如果你们的行程会偏离主要道路，建议准备好备用的定位工具。虽然GPS导航效果很好，但在偏远地区可能无法使用。建议准备一个离线地图或纸质地图，以防万一。</h4>
        </van-collapse-item>
        <van-collapse-item title="行李规划" name="2">
          <h4>
          如果轻装出发，后备箱里就有更多空间放置纪念品，每天晚上就不用拖拉太多行李。建议将旅途必需的用品放在随手可及的包里：除菌湿巾、口罩、手套、墨镜、防晒霜、急救包、存放零食和水的冰柜和车载手机充电器。我们还建议带上泳衣和浴巾，这样一来，想游泳的时候，就能游泳。
        </h4>
        </van-collapse-item>
        <van-collapse-item title="安排好播放列表" name="3">
          <h4>
          可可西里沿途风景无限，格外迷人，绝对不会让你腻烦，不过如果播放列表安排得当，途中会更加惬意。可以根据自己的口味，下载几段播客、有声书或者自己心爱的音乐，建议不要在线收听，以免移动网络信号不稳，影响体验。
        </h4>
        </van-collapse-item>
        <van-collapse-item title="带着孩子驾车旅行" name="4">
          <h4>
          如果要带孩子驾车出行，事先必须要有所规划和准备。准备好相应的游戏和娱乐项目，孩子就会全程沉浸欢乐之中，而不会不停地询问“到了没有？”除了音乐、有声书和桌游，你画我猜、谁是卧底、24点之类的游戏也非常适合路上开展。如果这些游戏都不能满足孩子，那就上零食吧！
        </h4>
        </van-collapse-item>
        <van-collapse-item title="带上现金" name="5">
          <h4>
          带上足够的现金，以免中途停靠乡村或路边小店，可以避免窘迫。
        </h4>
        </van-collapse-item>
        <van-collapse-item title="紧急号码" name="6">
          <h4>
          <p>务必将这些号码记下，以备不时之需</p> 
          <ul>
            <li>报警：110</li>
            <li>急救：120</li>
            <li>交通事故：122</li>
            <li>可可西里自然保护区管理局：0979-8410618</li>
          </ul>
        </h4>
        </van-collapse-item>
      </van-collapse>  
    </div>
		<AppFooter></AppFooter>
  </div>
</template>

<script>
import AppHeader from '@/components/AppHeader.vue';
import AppFooter from '@/components/AppFooter.vue';

  export default {
		components: { AppHeader,AppFooter },
    data() {
        return {
            activeNames: ["1"],
            active: 0,
            currentPage: 1,
            show: false,
        };
    },
    methods: {
        showPopup() {
            this.show = true;
        },
    },
    components: { AppHeader, AppFooter }
}
</script>

<style lang="scss" scoped>
.head{
	position: relative;
	h1{
		position: absolute;
		top: 200px; 
    left: 20px;
    color: white;
	}
}
.Preparation{
  h1{
    color: white;
    line-height: 80px;
    background-color: brown;
    padding-left: 20px;
  }
}
.trafficPlanning{
  padding:20px;
  h1{
    padding:50px 0px 5px 20px ;
  } 
}
.tripMode{
  padding: 0px 20px;
  h1{
    padding:50px 0px 5px 20px ;
  }
}


</style>
<style>
.trafficPlanning .van-cell{
  background-color: brown;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  padding-left: 25px;
  margin-bottom: 10px;
}
.van-tab__pane, .van-tab__pane-wrapper{
  height: 260px;
}
</style>